<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :offset="300"
        finished-text="没有更多了"
      >
        <van-cell v-for="item in goodsList" :key="item.id" @click="showGoodDetail(item.id)">
          <div>
            <van-image :src="item.img_url" />
            <p>{{item.zhaiyao}}</p>
          </div>
          <div class="bottomBox">
            <div class="maonyBox">
              <span>¥{{item.sell_price}}</span>
              <s>¥{{item.market_price}}</s>
            </div>
            <div class="messageBox">
              <span>热卖中</span>
              <span>剩余{{item.stock_quantity}}件</span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      // 商品列表数据
      goodsList: [],
      //获取页面page
      page: 0,
      // 下拉刷新数据
      count: 0,
      isLoading: false,
      // 上拉加载更多数据
      list: [],
      loading: false,
      finished: false
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      axios.get(`/api/getgoods?pageindex=${this.page}`).then(res => {
        if (res.data.status !== 0) {
          return this.$notify({ type: "danger", message: "获取商品图片失败" });
        }
        this.goodsList = res.data.message;
        console.log(this.goodsList);
      });
    },
    // 下拉刷新方法
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 500);
    },
    //上拉加载更多方法
    onLoad() {
      // 异步更新数据
      let timId = setTimeout(() => {
        this.page++;
        axios.get(`/api/getgoods?pageindex=${this.page}`).then(res => {
          if (res.data.status !== 0) {
            return this.$notify({
              type: "danger",
              message: "获取商品图片失败"
            });
          }
          this.goodsList = [...this.goodsList, ...res.data.message];
          console.log(this.goodsList);
        });
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.page >= 5) {
          this.finished = true;
          clearTimeout(timId);
        }
      }, 700);
    },
    showGoodDetail(id) {
      this.$router.push({
        path: "/goods/detail",
        query: {
          goodId: id
        }
      });
    }
  }
};
</script>
<style lang="less">
.van-list__finished-text {
  width: 100%;
}
</style>
<style lang="less" scoped>
.van-list {
  position: relative;
  display: flex;
  //   flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 5px 10px;
}

.van-cell {
  border: 1px solid #ccc;
  width: 48%;
  margin: 10px 0;
  padding: 0;
  font-size: 14px;
  p {
    padding: 0 10px;
  }
  .van-image {
    padding: 10px;
    min-height: 180px;
    display: inline-block;
  }
  .bottomBox {
    width: 100%;
    background: #eee;
    padding: 5px 0;
  }
  .van-cell__value {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.van-list__finished-text {
  position: absolute;
  width: 100% !important;
}
.maonyBox {
  display: flex;
  align-items: flex-start;
  span {
    margin: 0 15px 0 10px;
    font-size: 16px;
    color: red;
  }
}
.messageBox {
  display: flex;
  justify-content: space-between;
  span {
    margin: 0 10px 0 10px;
  }
}
</style>